import type { Column } from "@/components/CrudPage/type";
import { IconSelect } from "@/components/ReIcon";
import { ref } from "vue";
import SysMenuTreeSelect from "./components/SysMenuTreeSelect.vue";
import SysApiTree from "../sysApi/components/SysApiTree.vue";
import { deleteMenu, type SysMenu } from "@/views/domain/admin/api/sysMenu";
import { messager } from "@/utils/message";

export function useSysMenuProvider() {
  const menuType = ref({
    D: {
      type: "primary",
      text: "目录"
    },
    M: {
      type: "warning",
      text: "菜单"
    }
  });

  // 列配置
  const columns: Column[] = [
    {
      label: "菜单名称",
      prop: "title",
      slot: "title",
      search: true,
      create: true,
      edit: true,
      editSort: 0,
      colProps: { span: 12 }
    },
    {
      label: "父菜单",
      prop: "pid",
      hide: true,
      create: true,
      edit: true,
      colProps: { span: 12 },
      renderField: (value, onChange) => (
        <SysMenuTreeSelect vModel={value} onChange={onChange} />
      )
    },
    {
      label: "菜单类型",
      prop: "menuType",
      search: true,
      create: true,
      edit: true,
      valueType: "radio",
      options: [
        { label: "菜单", value: "M", color: "yellow" },
        { label: "目录", value: "D", color: "blue" }
      ],
      colProps: { span: 12 },
      fieldProps(value, data) {
        console.log(data, value);
        return { onChange: value => console.log("onchange: ", value) };
      },
      cellRenderer: ({ row }) => (
        <el-tag type={menuType.value[row.menuType].type}>
          {menuType.value[row.menuType].text}
        </el-tag>
      )
    },
    {
      label: "图标",
      prop: "icon",
      create: true,
      edit: true,
      hide: true,
      colProps: { span: 12 },
      renderField: (value, onChange) => (
        <IconSelect vModel={value} onUpdate:modelValue={onChange} />
      )
    },
    {
      label: "路由",
      prop: "routePath",
      create: true,
      edit: true,
      colProps: { span: 24 }
    },
    {
      label: "组件",
      prop: "component",
      search: true,
      edit: true,
      create: true,
      colProps: { span: 24 }
    },
    {
      label: "路由名称",
      prop: "routeName",
      create: true,
      edit: true,
      colProps: { span: 12 },
      tooltip: "有名称,则作为菜单路由,没有名称则作为全局路由"
    },
    {
      label: "重定向地址",
      prop: "redirect",
      hide: true,
      create: true,
      edit: true,
      colProps: { span: 12 },
      tooltip: "当子路由数量为1时,自动重定向到子路由"
    },
    {
      label: "是否显示",
      prop: "isHide",
      create: true,
      edit: true,
      valueType: "switch",
      colProps: { span: 12 },
      fieldProps: {
        activeValue: 1,
        inactiveValue: -1
      },
      cellRenderer(data) {
        return (
          <el-Tag type={data.row.isHide > 0 ? "success" : "info"}>
            {data.row.isHide > 0 ? "显示" : "隐藏"}
          </el-Tag>
        );
      }
    },
    {
      label: "绑定Api",
      prop: "apis",
      create: true,
      edit: true,
      hide: true,
      colProps: { span: 24 },
      renderField: (value, onChange) => (
        <SysApiTree vModel={value} onChange={onChange} />
      )
    },
    {
      label: "操作",
      prop: "operation",
      slot: "operation"
    }
  ];

  // 删除row
  const deleteRow = (row: SysMenu) => {
    deleteMenu(row.menuId).then(({ ok, msg }) => {
      messager.alert(ok, msg);
    });
  };

  return {
    columns,
    deleteRow
  };
}
